<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex商品列表练习</title>
    <style>
        /************ 公共CSS ***********/
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: none;
        }
        body {
            /* 给背景一个很浅很浅的灰色，这样不像白色那么刺眼 */
            background-color: #f5f5f5;
        }
        /************ 版心 ***********/
        .center {
            width: 1000px;
            margin: 0 auto;
        }
        /************ header  CSS ***********/
        .header .area{
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(#f5f4f5,#e6e6e5);
            box-shadow: 0 2px 5px #aaa;
            padding: 0 5px;
        }
        .header .area button{
            height: 30px;
            padding: 0 10px;
            color: #fff;
            border: 0;
            border-radius: 5px;
        }
        .header .area button:first-child {
            background-color: #ffaf0f;
        }
        .header .area button:last-child {
            background-color: #bbb;
        }
        /************ main  CSS ***********/
        .main ul{
            height: 620px;
            background-color: #ffffff;
            display: flex;
            justify-content: space-evenly;
            align-content: space-evenly;
            flex-wrap:wrap;
        }
        .main ul li{
            width: 230px;
            height: 280px;
            border: 1px solid #999;
        }
        .main ul li img{
            width: 100%;
        }
        .main ul li a{
            font-size: 12px;
            color: #000;
            /* 为了加上下间距，可以变块级元素 */
            display: block;
            margin: 5px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">
            <div class="header">
                <div class="area">
                    <button>管理文件夹</button>
                    <button>清空失效商品</button>
                </div>
            </div>
            <div class="main">
                <ul>
                    <li>
                        <img src="img/shoplist/shop1.jpg">
                        <a href="#">戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标</a>
                        <h4>￥ 19.90 </h4>
                    </li>
                    <li>
                        <img src="img/shoplist/shop2.jpg">
                        <a href="#">华为笔记本电脑MateBook D 14 SE版 14英寸 11代酷睿 i5</a>
                        <h4>￥ 3899.00 </h4>
                    </li>
                    <li>
                        <img src="img/shoplist/shop3.jpg">
                        <a href="#">雷柏（Rapoo） V500PRO 机械键盘 有线键盘 游戏键盘 104键混光键盘</a>
                        <h4>￥ 109.00</h4>
                    </li>
                    <li>
                        <img src="img/shoplist/shop4.jpg">
                        <a href="#">先马（SAMA）平头哥M1电竞版 Mini小机箱 支持MATX主板240水冷</a>
                        <h4>￥ 179.00</h4>
                    </li>
                    <li>
                        <img src="img/shoplist/shop5.jpg">
                        <a href="#">英特尔i5 10400F/10600KF i511400F</a>
                        <h4>￥ 1299.00</h4>
                    </li>
                    <li>
                        <img src="img/shoplist/shop6.jpg">
                        <a href="#">金士顿（Kingston）32GB USB3.2 Gen 1 U盘 DTX</a>
                        <h4>￥ 27.90</h4>
                    </li>
                    <li>
                        <img src="img/shoplist/shop7.jpg">
                        <a href="#">罗技（Logitech）C270高清网络摄像头 网课 摄像头家用 视频通话 带麦克风台式机电脑摄像头</a>
                        <h4>￥119.00</h4>
                    </li>
                    <li>
                        <img src="img/shoplist/shop8.jpg">
                        <a href="#">微软 Xbox Elite 无线控制器2代 二代精英手柄 无线手柄 蓝牙手柄 自定义设置/按键 Type C接口</a>
                        <h4>￥ 1398.00</h4>
                    </li>
                </ul>


            </div>
        </div>
    </div>

</body>
</html>